<template>
  <div class="yonghu">
    		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" >
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>图书管理</el-breadcrumb-item>
		<el-breadcrumb-item>图书列表</el-breadcrumb-item>


		</el-breadcrumb>
    <!-- 显示其他页面 -->
    <!-- <router-view></router-view> -->
    <!-- 卡片视图区 -->
    <el-card >  
      <!-- 搜索与添加区 -->
      <el-row  :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入书名" v-model="queryInfo.bookname" clearable> 
            <el-button slot="append" icon="el-icon-search" @click="chaxun(queryInfo.bookname)"  ></el-button>
            </el-input>
          </el-col>
          
          <el-col :span="4">
            <el-button type="primary "  @click="dialogVisible=true ">添加图书</el-button>
          </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="booklist" border stripe>
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column align="center" label="图片" prop="img" width="120">
            <template slot-scope="scope" >
                    <el-image :src="scope.row.img" fit="fill"></el-image>
                </template>
        </el-table-column>
		    <el-table-column align="center" label="图书" prop="bookname" width="120" ></el-table-column>
        <el-table-column align="center" label="作者" prop="author"  width="120"></el-table-column> 
		    <el-table-column align="center" label="种类 " prop="kind" width="120"></el-table-column> 
        <el-table-column align="center" label="描述" prop="instruction" ></el-table-column> 
        <el-table-column align="center" label="数量" prop="num" width="120" ></el-table-column>
        <el-table-column align="center" label="操作 "  >
          <!-- 通过scope拿到这一行的数据-->
          <template slot-scope="scope" >
                <el-button size="mini" type="success" plain @click="jie(scope.row._id)">借</el-button>
                <el-button size="mini" type="primary" plain @click="showdialog(scope.row._id)">编辑</el-button>
                
                <el-button size="mini" type="danger"  plain  @click="remove(scope.row._id)">删除</el-button>
               
            </template>
        </el-table-column> 
        

      </el-table>
    </el-card>
    <!-- 添加图书对话框 -->
      <el-dialog   title="添加图书"   :visible.sync="dialogVisible"  width="50%" @close="close" >
        <!-- 内容主体区域 -->
        <el-form :model="addbook" :rules="addbookRules" ref="addbookRef" label-width="70px">
          <el-form-item label="图书图片网址" prop="img">
            <el-input v-model="addbook.img" ></el-input>
          </el-form-item>
          <el-form-item label="图书名" prop="bookname">
            <el-input v-model="addbook.bookname"></el-input>
          </el-form-item>

          <el-form-item label="作者" prop="author">
            <el-input v-model="addbook.author"></el-input>
          </el-form-item>

          <el-form-item label="描述" prop="instruction">
            <el-input v-model="addbook.instruction"></el-input>
          </el-form-item>

          <el-form-item label="种类" prop="kind">
             <el-input v-model="addbook.kind"></el-input>
          </el-form-item>

          <el-form-item label="数量" prop="num">
             <el-input v-model="addbook.num"></el-input>
          </el-form-item>

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"   @click="addb">确 定</el-button>
        </span>
      </el-dialog>
    <!-- 修改图书对话框 --> 
    <el-dialog   title="修改图书"   :visible.sync="editdialog"  width="50%" @close="editclose" >
      <!-- 内容主体区域   ref是表单的引用  rules是验证规则-->
      <el-form :model="editform" :rules="editformRules" ref="editformRef" label-width="70px">
        <el-form-item label="图书的图片网址" prop="img">
        <el-input v-model="editform.img"  ></el-input>
        </el-form-item>
        <el-form-item label="图书名" prop="bookname">
        <el-input v-model="editform.bookname"   ></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
        <el-input v-model="editform.author"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="instruction">
        <el-input v-model="editform.instruction"></el-input>
        </el-form-item>
        <el-form-item label="种类" prop="kind">
        <el-input v-model="editform.kind"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="num">
        <el-input v-model="editform.num"></el-input>
        </el-form-item>

      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog=false">取 消</el-button>
        <el-button type="primary" @click="editbookinfo " >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除用户操作 -->

  </div>
  
  
</template>

<script>
import { validateURL ,} from "./validate";
export default {

  data () {
    return {
      queryInfo:{
        img:"",
        bookname:"",
        author:"",
        instruction:"",
        kind:"",
        num:"",
      },
      picture:[],
      booklist:[],
      dialogVisible: false,
      addbook:{
        img:"",
        bookname:"",
        author:"",
        instruction:"",
        kind:"",
        num:"",
      },
      // 添加表单的规则
      addbookRules:{
        img:[ {required: true, message: "请输入正确的图片网址", trigger:'blur'}, ],
        bookname: [ {required: true, message: "请输入书名", trigger:'blur'}],
        author: [ {required: true, message: "请输入作者", trigger:'blur'}],
        instruction: [ {required: true, message: "请输入图书描述", trigger:'blur'}],
        kind : [ {required: true, message: "请输入种类", trigger:'blur'}],
        num : [ {required: true, message: "请输入数量", trigger:'blur'}]
      },
      // 修改
      editdialog: false,
      //查询到的图书想·信息
      editform:{
        
        img:"",
        bookname:"",
        author:"",
        instruction:"",
        kind:"",
        num:"",
      },
      //验证规则
      editformRules:{
        img:[{required: true,message:"请输入图片网址", trigger:"blur" }],
        bookname: [ {required: true, message: "请输入书名", trigger:'blur'}],
        author: [ {required: true, message: "请输入作者", trigger:'blur'}],
        instruction: [ {required: true, message: "请输入图书描述", trigger:'blur'}],
        kind: [ {required: true, message: "请输入种类", trigger:'blur'}] ,
        num : [ {required: true, message: "请输入数量", trigger:'blur'}]   
      },
      jieshu:{
        name:"",
        bookname:"",
        img:"",
        author:"",
        instruction:"",
        kind:"",
      }
    }
  },
  created() {
    this.getbooklist()
  },
  methods: {
   async getbooklist(){
      const result= await this.$http.get('/books/show');
      console.log(result.data.data);//数据数组
      //result.data.data[0].img 为图片数据
      this.picture=result.data.data;
      console.log(this.picture)
      if(result.data.code!==200) {
        return this.$message.error('获取用户列表失败')
      }
      this.booklist=result.data.data
      console.log(result.data.data)
    },
    //监听表单关闭
    close(){
      this.$refs.addbookRef.resetFields()
    },
    //点击按钮添加新图书
     async addb(){
       console.log(validateURL(this.addbook.img))
      if(validateURL(this.addbook.img)==false){
        this.$message({showClose: true,message:'图片地址错误，请输入正确网址' ,type:'error'});
      }
      else{
      const res=await this.$http.post("/books/create",this.addbook)
      console.log(res)
      if(res.data.code!==200){
              this.$message({showClose: true,message:'添加失败' ,type:'error'});
          }else{
              this.$message({showClose: true,message:'添加成功', type:'success'});
              this.dialogVisible=false
              this.getbooklist()
            }
      }
      
        
    },
      async showdialog(id){
      this.editdialog=true
      const res =await this.$http.get('books/findname?_id='+id)
      if(res.data.code!==200){
        return this.$message.error('查询图书信息失败了')
      }else{
        this.editform=res.data.data;
      }
    },
    // 修改图书
    // async showdialog(id){
      
    //   this.editdialog=true
      
    //   const res= await this.$http.get('/books/findname?_id='+id)
    //   console.log(res.data.data[0])
    //   if(res.data.code!==200){
    //     return this.$message.error('查询图书信息失败了')
    //   }else{
    //     this.editform=res.data.data[0];
    //   }

    // },
    //监听关闭
    editclose(){
      this.$refs.editformRef.resetFields()
    },
    //处理函数
     async editbookinfo(){
  this.$refs.editformRef.validate(async valid=> {
     if(!valid) return 
         if(validateURL(this.editform.img)==false){
        this.$message({showClose: true,message:'图片地址错误，请输入正确网址' ,type:'error'});
      }else{
      //发起修改请求
        const res= await this.$http.put('/books/update?_id='+this.editform._id , { author:this.editform.author, instruction:this.editform.instruction, kind:this.editform.kind, img:this.editform.img,bookname:this.editform.bookname, })
      // 关闭对话框
      this.editdialog=false;
      //刷新数据列表
      this.getbooklist();
      //提示修改成功
      this.$message.success('更新图书成功')
      
        }
      })
    },
    
    // 查询图书
    async  chaxun(b){
      const res= await this.$http.get('/books/findname?bookname='+b)
      console.log(res.data.data)
      this.booklist=res.data.data;
    },
    //根据书名删除图书
    remove(id) {
        this.$confirm('此操作将永久删除该图书, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/books/delete?_id='+id);
          
          this.$message({
            type: 'success',
            message: '删除成功! 刷新页面更新数据'
          });
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        this.getbooklist()
    },
    handleChapter(){
      this.$router.push('/book')
    },
    async  jie(id){
      var username=localStorage.getItem("n")
      this.jieshu.name=username;
      const s =await this.$http.get('books/findname?_id='+id)
      if(s.data.code!==200){
        return this.$message.error('查询图书信息失败了')
      }else{
        
        this.jieshu.bookname=s.data.data.bookname;
        this.jieshu.img=s.data.data.img;
        this.jieshu.kind=s.data.data.kind;
        this.jieshu.instruction=s.data.data.instruction;
        this.jieshu.author=s.data.data.author;
        this.$message.success('借阅成功');
      }
      console.log(this.jieshu);
      const r= await this.$http.post('/borrow/create',this.jieshu)  ;
      const res=await this.$http.put('/books/borrow?_id='+id);
      this.getbooklist()
    },
    async  huan(id){
      const res= await this.$http.put('/books/return?_id='+id)
      this.getbooklist()
    },
  }
}
</script>

<style scoped>
.yonghu{
  height: 438px;
}
.el-breadcrumb{
  height: 30px;
}
.el-card{
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.el-table{
  margin-top: 15px;
}
.el-card__body{
  padding: 0;
}

</style>
